<template>
  <div class="order-page">
    <!-- 订单容器 -->
    <div class="order-container">
      <!-- 支付倒计时 -->
      <div class="payment-countdown">
        <img src="@/assets/template/time.png" alt="" style="max-height: 20px" />
        <span class="bold" style="padding-top: 3px; padding-left: 10px">
          待支付: {{ countdown }}
        </span>
      </div>

      <!-- 商品信息 -->
      <div class="product-info-section">
        <h3 class="section-title">商品：</h3>
        <div class="product-details">
          <div class="product-image-container">
            <img
              src="https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png"
              alt="智慧园区"
              class="product-image"
            />
          </div>
          <div class="product-info">
            <div class="product-name">智慧园区</div>
            <span class="tag-item">公众号/官网</span>
            <div class="product-tags">
              <span class="tag-item child">管理服务</span>
              <span class="tag-item child">企业互动</span>
              <span class="tag-item child">员工办公</span>
              <span class="tag-item child">品牌传播</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 版本选择 -->
      <div class="option-section">
        <h3 class="section-title">版本：</h3>
        <div class="options-container">
          <label 
            class="radio-option" 
            @click="selectVersion('micro')"
          >
            <svg
              width="17"
              height="17"
              viewBox="-10 -12 80 80"
              xmlns="http://www.w3.org/2000/svg"
              :class="{ 'selected': selectedVersion === 'micro' }"
            >
              <!-- 绘制橙色外环 -->
              <circle
                cx="30"
                cy="30"
                r="25"
                fill="none"
                :stroke="selectedVersion === 'micro' ? '#f97316' : '#e0e0e0'"
                :stroke-width="selectedVersion === 'micro' ? 25 : 8"
              />
              <!-- 绘制白色内环 -->
              <circle 
                cx="30" 
                cy="30" 
                r="8" 
                fill="#ffffff"
                v-if="selectedVersion === 'micro'"
              />
            </svg>
            <span class="option-text">微官网</span>
          </label>
          <label 
            class="radio-option" 
            @click="selectVersion('pc')"
          >
            <svg
              width="17"
              height="17"
              viewBox="-10 -12 80 80"
              xmlns="http://www.w3.org/2000/svg"
              :class="{ 'selected': selectedVersion === 'pc' }"
            >
              <!-- 绘制橙色外环 -->
              <circle
                cx="30"
                cy="30"
                r="25"
                fill="none"
                :stroke="selectedVersion === 'pc' ? '#f97316' : '#e0e0e0'"
                :stroke-width="selectedVersion === 'pc' ? 25 : 8"
              />
              <!-- 绘制白色内环 -->
              <circle 
                cx="30" 
                cy="30" 
                r="8" 
                fill="#ffffff"
                v-if="selectedVersion === 'pc'"
              />
            </svg>
            <span class="option-text">PC端官网</span>
          </label>
          <label 
            class="radio-option" 
            @click="selectVersion('both')"
          >
            <svg
              width="17"
              height="17"
              viewBox="-10 -12 80 80"
              xmlns="http://www.w3.org/2000/svg"
              :class="{ 'selected': selectedVersion === 'both' }"
            >
              <!-- 绘制橙色外环 -->
              <circle
                cx="30"
                cy="30"
                r="25"
                fill="none"
                :stroke="selectedVersion === 'both' ? '#f97316' : '#e0e0e0'"
                :stroke-width="selectedVersion === 'both' ? 25 : 8"
              />
              <!-- 绘制白色内环 -->
              <circle 
                cx="30" 
                cy="30" 
                r="8" 
                fill="#ffffff"
                v-if="selectedVersion === 'both'"
              />
            </svg>
            <span class="option-text">微官网以及PC官网</span>
          </label>
        </div>
      </div>

      <!-- 时间选择 -->
      <div class="option-section">
        <h3 class="section-title bold">时间：</h3>
        <div class="options-container">
          <label 
            class="radio-option" 
            @click="selectDuration('3days')"
          >
            <svg
              width="17"
              height="17"
              viewBox="-10 -12 80 80"
              xmlns="http://www.w3.org/2000/svg"
              :class="{ 'selected': selectedDuration === '3days' }"
            >
              <!-- 绘制橙色外环 -->
              <circle
                cx="30"
                cy="30"
                r="25"
                fill="none"
                :stroke="selectedDuration === '3days' ? '#f97316' : '#e0e0e0'"
                :stroke-width="selectedDuration === '3days' ? 25 : 8"
              />
              <!-- 绘制白色内环 -->
              <circle 
                cx="30" 
                cy="30" 
                r="8" 
                fill="#ffffff"
                v-if="selectedDuration === '3days'"
              />
            </svg>
            <span class="option-text">3天免费试用</span>
          </label>
          <label 
            class="radio-option" 
            @click="selectDuration('1month')"
          >
            <svg
              width="17"
              height="17"
              viewBox="-10 -12 80 80"
              xmlns="http://www.w3.org/2000/svg"
              :class="{ 'selected': selectedDuration === '1month' }"
            >
              <!-- 绘制橙色外环 -->
              <circle
                cx="30"
                cy="30"
                r="25"
                fill="none"
                :stroke="selectedDuration === '1month' ? '#f97316' : '#e0e0e0'"
                :stroke-width="selectedDuration === '1month' ? 25 : 8"
              />
              <!-- 绘制白色内环 -->
              <circle 
                cx="30" 
                cy="30" 
                r="8" 
                fill="#ffffff"
                v-if="selectedDuration === '1month'"
              />
            </svg>
            <span class="option-text">一个月</span>
          </label>
          <label 
            class="radio-option" 
            @click="selectDuration('3months')"
          >
            <svg
              width="17"
              height="17"
              viewBox="-10 -12 80 80"
              xmlns="http://www.w3.org/2000/svg"
              :class="{ 'selected': selectedDuration === '3months' }"
            >
              <!-- 绘制橙色外环 -->
              <circle
                cx="30"
                cy="30"
                r="25"
                fill="none"
                :stroke="selectedDuration === '3months' ? '#f97316' : '#e0e0e0'"
                :stroke-width="selectedDuration === '3months' ? 25 : 8"
              />
              <!-- 绘制白色内环 -->
              <circle 
                cx="30" 
                cy="30" 
                r="8" 
                fill="#ffffff"
                v-if="selectedDuration === '3months'"
              />
            </svg>
            <span class="option-text">三个月</span>
          </label>
          <label 
            class="radio-option" 
            @click="selectDuration('1year')"
          >
            <svg
              width="17"
              height="17"
              viewBox="-10 -12 80 80"
              xmlns="http://www.w3.org/2000/svg"
              :class="{ 'selected': selectedDuration === '1year' }"
            >
              <!-- 绘制橙色外环 -->
              <circle
                cx="30"
                cy="30"
                r="25"
                fill="none"
                :stroke="selectedDuration === '1year' ? '#f97316' : '#e0e0e0'"
                :stroke-width="selectedDuration === '1year' ? 25 : 8"
              />
              <!-- 绘制白色内环 -->
              <circle 
                cx="30" 
                cy="30" 
                r="8" 
                fill="#ffffff"
                v-if="selectedDuration === '1year'"
              />
            </svg>
            <span class="option-text">一年</span>
          </label>
          <label 
            class="radio-option" 
            @click="selectDuration('3years')"
          >
            <svg
              width="17"
              height="17"
              viewBox="-10 -12 80 80"
              xmlns="http://www.w3.org/2000/svg"
              :class="{ 'selected': selectedDuration === '3years' }"
            >
              <!-- 绘制橙色外环 -->
              <circle
                cx="30"
                cy="30"
                r="25"
                fill="none"
                :stroke="selectedDuration === '3years' ? '#f97316' : '#e0e0e0'"
                :stroke-width="selectedDuration === '3years' ? 25 : 8"
              />
              <!-- 绘制白色内环 -->
              <circle 
                cx="30" 
                cy="30" 
                r="8" 
                fill="#ffffff"
                v-if="selectedDuration === '3years'"
              />
            </svg>
            <span class="option-text">三年</span>
          </label>
        </div>
      </div>

      <!-- 支付方式 -->
      <div class="option-section">
        <h3 class="section-title">支付方式：</h3>
        <div class="payment-methods">
          <label 
            class="payment-option" 
            @click="selectPayment('wechat')"
          >
            <div 
              class="check-circle"
              v-show="selectedPayment === 'wechat'"
            >
              <!-- SVG 对勾（path 路径绘制对勾形状） -->
              <svg viewBox="0 0 24 24">
                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
              </svg>
            </div>
            <div 
              class="payment-icon wechat-pay"
              :class="{ 'active': selectedPayment === 'wechat' }"
            >
              <img src="@/assets/template/wechart.png" alt="" />
              <span>微信支付</span>
            </div>
          </label>
          <label 
            class="payment-option" 
            @click="selectPayment('alipay')"
          >
            <div 
              class="check-circle"
              v-show="selectedPayment === 'alipay'"
            >
              <!-- SVG 对勾（path 路径绘制对勾形状） -->
              <svg viewBox="0 0 24 24">
                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
              </svg>
            </div>
            <div 
              class="payment-icon alipay"
              :class="{ 'active': selectedPayment === 'alipay' }"
            >
              <img src="@/assets/template/pay.png" alt="" />
              <span>支付宝支付</span>
            </div>
          </label>
          <label 
            class="payment-option" 
            @click="selectPayment('unionpay')"
          >
            <div 
              class="check-circle"
              v-show="selectedPayment === 'unionpay'"
            >
              <!-- SVG 对勾（path 路径绘制对勾形状） -->
              <svg viewBox="0 0 24 24">
                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
              </svg>
            </div>
            <div 
              class="payment-icon unionpay"
              :class="{ 'active': selectedPayment === 'unionpay' }"
            >
              <img src="@/assets/template/bank.png" alt="" />
              <span>银联支付</span>
            </div>
          </label>
        </div>
      </div>

      <!-- 优惠券 -->
      <div class="option-section">
        <h3 class="section-title bold">优惠券：</h3>
        <div class="coupons-container">
          <label 
            class="coupon-option" 
            @click="selectCoupon('first')"
          >
            <i
              class="el-icon-success"
              style="font-size: 20px; color: #ff7600"
              v-if="selectedCoupon === 'first'"
            ></i>
            <svg
              width="17"
              height="17"
              viewBox="-10 -12 80 80"
              xmlns="http://www.w3.org/2000/svg"
              v-else
            >
              <circle
                cx="30"
                cy="30"
                r="25"
                fill="none"
                stroke="#e0e0e0"
                stroke-width="8"
              />
            </svg>
            <span class="coupon-text"><span style="padding-right: 10px;">首单优惠</span> ¥ 20</span>
          </label>
          <label 
            class="coupon-option" 
            @click="selectCoupon('yearly')"
          >
            <i
              class="el-icon-success"
              style="font-size: 20px; color: #ff7600"
              v-if="selectedCoupon === 'yearly'"
            ></i>
            <svg
              width="17"
              height="17"
              viewBox="-10 -12 80 80"
              xmlns="http://www.w3.org/2000/svg"
              v-else
            >
              <circle
                cx="30"
                cy="30"
                r="25"
                fill="none"
                stroke="#e0e0e0"
                stroke-width="8"
              />
            </svg>
            <span class="coupon-text"><span style="padding-right: 10px;">年付优惠</span> ¥ 20</span>
          </label>
          <label 
            class="coupon-option" 
            @click="selectCoupon('referral')"
          >
            <i
              class="el-icon-success"
              style="font-size: 20px; color: #ff7600"
              v-if="selectedCoupon === 'referral'"
            ></i>
            <svg
              width="17"
              height="17"
              viewBox="-10 -12 80 80"
              xmlns="http://www.w3.org/2000/svg"
              v-else
            >
              <circle
                cx="30"
                cy="30"
                r="25"
                fill="none"
                stroke="#e0e0e0"
                stroke-width="8"
              />
            </svg>
            <span class="coupon-text"><span style="padding-right: 10px;">推荐返</span> ¥ 20</span>
          </label>
        </div>
      </div>

      <!-- 价格信息 -->
      <div class="price-section">
        <div class="price-item">
          <span class="price-label bold">商品总价:</span>
          <span class="price-value">¥{{ totalPrice }}</span>
        </div>
        <div class="price-item" style="margin-top: 50px">
          <span class="price-label bold">实付款:</span>
          <div class="final-price-container">¥
            <span class="final-price-value">{{ finalPrice }}</span>
            <span class="original-price">¥{{ totalPrice }}</span>
          </div>
        </div>
      </div>

      <!-- 提交按钮 -->
      <div class="submit-section">
        <button class="submit-order-btn" @click="submitOrder">提交订单</button>
      </div>
    </div>

    <!-- 保障服务区域 -->
    <div class="guarantee-section flex-around" style="background-color: #FF5F0A;padding: 15px 120px;">
      <img style="max-height: 50px;" src="@/assets/template/zheng.png" alt="正品保证" class="guarantee-icon" />
      <img style="max-height: 50px;"  src="@/assets/template/bao.png" alt="质保" class="guarantee-icon" />
      <img style="max-height: 50px;"  src="@/assets/template/kuai.png" alt="快速" class="guarantee-icon" />
      <img style="max-height: 50px;"  src="@/assets/template/shou.png" alt="售后" class="guarantee-icon" />
    </div>

    <!-- 支付弹窗 -->
    <div class="payment-modal" v-if="showPaymentModal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">
            <i class="el-icon-document-copy" style="color: #ff7d00; margin-right: 5px;"></i>
            金额支付
          </div>
          <button class="close-btn" @click="closePaymentModal">×</button>
        </div>
        <div class="modal-body">
          <div class="payment-info-section">
            <div class="payment-amount-box">
              <div class="amount-text">{{ finalPrice }}元/3月</div>
              <div class="amount-divider"></div>
              <div class="amount-desc">确认支付金额，完成支付！</div>
              <div class="amount-arrow"></div>
            </div>
            <div class="qr-code-section">
              <div class="qr-code-label">扫码支付</div>
              <div class="qr-code-dots">........</div>
              <div class="qr-code-image">
                <img src="@/assets/qrcode_service.png" alt="支付二维码" />
              </div>
            </div>
          </div>
          <div class="links-section">
            <div class="link-item">公众号链接：</div>
            <div class="link-item">管理端链接：</div>
            <div class="login-tip">
              <i class="el-icon-info" style="color: #ff7d00; margin-right: 5px;"></i>
              管理端的登录账号密码与您的微小猪登录账号密码相同，请直接使用！
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="payment-done-btn" @click="paymentDone">付款完成</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "productTemplateOrder",
  data() {
    return {
      countdown: "00:29:59",
      selectedVersion: "micro", // micro, pc, both
      selectedDuration: "3days", // 3days, 1month, 3months, 1year, 3years
      selectedPayment: "wechat", // wechat, alipay, unionpay
      selectedCoupon: "first", // first, yearly, referral
      totalPrice: 1619,
      finalPrice: 1599,
      timer: null,
      showPaymentModal: false // 控制支付弹窗显示
    };
  },
  methods: {
    // 处理支付倒计时
    startCountdown() {
      // 模拟倒计时逻辑
      this.timer = setInterval(() => {
        const [hours, minutes, seconds] = this.countdown.split(':').map(Number);
        let totalSeconds = hours * 3600 + minutes * 60 + seconds;
        
        if (totalSeconds > 0) {
          totalSeconds--;
          const newHours = Math.floor(totalSeconds / 3600).toString().padStart(2, '0');
          const newMinutes = Math.floor((totalSeconds % 3600) / 60).toString().padStart(2, '0');
          const newSeconds = (totalSeconds % 60).toString().padStart(2, '0');
          
          this.countdown = `${newHours}:${newMinutes}:${newSeconds}`;
        } else {
          clearInterval(this.timer);
          // 倒计时结束后的处理
          this.countdown = "00:00:00";
        }
      }, 1000);
    },

    // 版本选择
    selectVersion(version) {
      this.selectedVersion = version;
      // 根据选择的版本更新价格
      this.calculatePrice();
    },

    // 时间选择
    selectDuration(duration) {
      this.selectedDuration = duration;
      // 根据选择的时间更新价格
      this.calculatePrice();
    },

    // 支付方式选择
    selectPayment(payment) {
      this.selectedPayment = payment;
    },

    // 优惠券选择
    selectCoupon(coupon) {
      this.selectedCoupon = coupon;
      // 根据选择的优惠券更新价格
      this.calculatePrice();
    },

    // 计算价格
    calculatePrice() {
      // 基础价格根据版本和时间变化
      let basePrice = 0;
      
      // 根据版本和时间计算基础价格
      switch (this.selectedVersion) {
        case 'micro':
          basePrice = 500;
          break;
        case 'pc':
          basePrice = 1000;
          break;
        case 'both':
          basePrice = 1500;
          break;
      }
      
      // 根据时间调整价格
      switch (this.selectedDuration) {
        case '3days':
          basePrice = 0; // 免费试用
          break;
        case '1month':
          basePrice = basePrice;
          break;
        case '3months':
          basePrice = basePrice * 2.5; // 3个月有优惠
          break;
        case '1year':
          basePrice = basePrice * 10; // 1年有更大优惠
          break;
        case '3years':
          basePrice = basePrice * 25; // 3年优惠最大
          break;
      }
      
      // 应用优惠券
      let discount = 0;
      if (this.selectedCoupon === 'first') {
        discount = 20;
      } else if (this.selectedCoupon === 'yearly' && this.selectedDuration === '1year') {
        discount = 50;
      } else if (this.selectedCoupon === 'referral') {
        discount = 20;
      }
      
      // 更新总价和实付款
      this.totalPrice = Math.max(0, Math.round(basePrice));
      this.finalPrice = Math.max(0, Math.round(basePrice - discount));
    },

    // 提交订单
    submitOrder() {
      // 实际项目中这里应该实现提交订单的逻辑
      console.log("提交订单", {
        version: this.selectedVersion,
        duration: this.selectedDuration,
        payment: this.selectedPayment,
        coupon: this.selectedCoupon,
        price: this.finalPrice
      });
      // 显示支付弹窗
      this.showPaymentModal = true;
    },

    // 关闭支付弹窗
    closePaymentModal() {
      this.showPaymentModal = false;
    },

    // 付款完成
    paymentDone() {
      // 实际项目中这里应该实现付款完成后的逻辑
      console.log("付款完成");
      this.showPaymentModal = false;
      // 显示支付成功提示
      alert('支付成功！');
    }
  },
  mounted() {
    // 页面加载时启动倒计时和计算价格
    this.startCountdown();
    this.calculatePrice();
  },
  beforeDestroy() {
    // 组件销毁时清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>

<style scoped>
.order-page {
  background-color: #f8f9fa;
}

.order-container {
  margin: 0 60px 30px 60px;
  background-color: #fff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
}

/* 支付倒计时 */
.payment-countdown {
  position: absolute;
  top: 20px;
  right: 30px;
  display: flex;
  align-items: center;
  color: #ff7d00;
  font-size: 14px;
}

.payment-countdown i {
  margin-right: 5px;
  font-size: 16px;
}

/* 通用区块标题 */
.section-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}

/* 商品信息 */
.product-info-section {
  margin-bottom: 25px;
}

.product-details {
  display: flex;
  align-items: center;
}
.product-image-container {
  padding: 10px 10px 0 10px;
  border-radius: 8px;
  opacity: 1;
  max-height: 110px;
  max-width: 100px;
  background: #d6e8fe;
  overflow: hidden;
  margin-right: 20px;
}

.product-image {
  /* width: 60px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px; */
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  margin-bottom: 30px;
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.tag-item {
  color: #666;
  font-size: 12px;
}
.tag-item.child {
  color: #666;
  padding: 2px 8px 2px 0;
  border-radius: 2px;
  font-size: 12px;
  border-right: 2px solid #b8b8b8;
}

/* 选项区块 */
.option-section {
  margin-bottom: 25px;
}

.options-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.radio-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.radio-option:hover {
  transform: translateY(-2px);
}

.radio-option .option-text {
  font-size: 14px;
  color: #333;
  padding-left: 5px;
  transition: color 0.3s;
}

.radio-option.selected .option-text {
  color: #f97316;
}

/* 支付方式 */
.payment-methods {
  display: flex;
  gap: 15px;
}

.payment-option {
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.payment-option:hover {
  transform: translateY(-2px);
}

.check-circle {
  position: absolute;
  right: 10px;
  top: 10px;
  /* 圆形样式：宽度高度一致 + 圆角 50% */
  width: 17px;
  height: 17px;
  border-radius: 50%;
  /* 橙色背景（可根据需求调整色调） */
  background-color: #f97316;
  /* 居中显示 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-circle svg {
  /* 对勾颜色为白色 */
  fill: white;
  /* 对勾大小（可根据圆形调整） */
  width: 13px;
  height: 13px;
}

.payment-option input[type="radio"] {
  display: none;
}

.payment-icon img {
  margin-right: 10px;
}

.payment-icon.active {
  border: 1px solid #f97316 !important;
  background-color: #fff9f0;
  color: #ff7d00;
}

.payment-icon {
  padding: 20px 10px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  transition: all 0.3s;
  font-size: 14px;
  color: #333;
  min-width: 100px;
  text-align: center;
}

.payment-icon:hover {
  border-color: #ff7d00;
  background-color: #fff9f0;
}

.payment-icon.wechat-pay {
  background-size: 20px 20px;
  padding: 20px 30px 20px 20px;
}

.payment-icon.alipay {
  background-size: 20px 20px;
  padding: 20px 30px 20px 20px;
}

.payment-icon.unionpay {
  background-size: 20px 20px;
  padding: 20px 30px 20px 20px;
}

/* 优惠券 */
.coupons-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.coupon-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 8px 12px;
  border-radius: 4px;
}

.coupon-option:hover {
  background-color: #f9f9f9;
  transform: translateY(-2px);
}

.coupon-text {
  font-size: 14px;
  color: #333;
  padding-left: 10px;
}

/* 价格信息 */
.price-section {
  margin-bottom: 25px;
}

.price-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.price-label {
  font-size: 14px;
  color: #666;
}

.price-value {
  font-size: 14px;
  color: #333;
  padding-left: 40px;
}

.final-price-container {
  text-align: right;
  margin-left: 40px;
}

.final-price-value {
  font-size: 28px;
  color: #ff7d00;
  font-weight: bold;
  transition: all 0.3s ease;
}

.original-price {
  font-size: 13px;
  color: #999;
  text-decoration: line-through;
  padding-left: 20px;
}

/* 提交按钮 */
.submit-section {
  display: flex;
  justify-content: flex-end;
}

.submit-order-btn {
  background-color: #ff7d00;
  color: #fff;
  border: none;
  padding: 13px 100px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-order-btn:hover {
  background-color: #ff6a00;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 125, 0, 0.3);
}

.submit-order-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(255, 125, 0, 0.3);
}

/* 支付弹窗样式 */
.payment-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  border-radius: 8px;
  width: 600px;
  max-width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #e8e8e8;
}

.modal-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s;
}

.close-btn:hover {
  background-color: #f5f5f5;
  color: #666;
}

.modal-body {
  padding: 30px;
}

.payment-info-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.payment-amount-box {
  border: 2px solid #ff7d00;
  border-radius: 8px;
  padding: 20px 30px;
  position: relative;
}

.amount-text {
  font-size: 28px;
  font-weight: bold;
  color: #ff7d00;
  margin-bottom: 10px;
}

.amount-divider {
  height: 1px;
  background-color: #e8e8e8;
  margin-bottom: 10px;
}

.amount-desc {
  font-size: 14px;
  color: #666;
}

.amount-arrow {
  position: absolute;
  bottom: -12px;
  right: 30px;
  width: 24px;
  height: 24px;
  background-color: #ff7d00;
  transform: rotate(45deg);
  z-index: 1;
}

.amount-arrow::after {
  content: "✓";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: white;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
}

.qr-code-section {
  text-align: center;
}

.qr-code-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.qr-code-dots {
  font-size: 12px;
  color: #999;
  margin-bottom: 15px;
}

.qr-code-image img {
  width: 150px;
  height: 150px;
}

.links-section {
  margin-bottom: 30px;
}

.link-item {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.login-tip {
  font-size: 12px;
  color: #ff7d00;
  margin-top: 20px;
  padding: 10px 15px;
  background-color: #fff9f0;
  border-radius: 4px;
  border-left: 4px solid #ff7d00;
}

.modal-footer {
  display: flex;
  justify-content: center;
  padding: 20px 30px;
  border-top: 1px solid #e8e8e8;
}

.payment-done-btn {
  background-color: #ff7d00;
  color: #fff;
  border: none;
  padding: 12px 40px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.payment-done-btn:hover {
  background-color: #ff6a00;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 125, 0, 0.3);
}

.payment-done-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(255, 125, 0, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .order-container {
    width: 100%;
    padding: 20px;
  }

  .payment-countdown {
    position: relative;
    top: auto;
    right: auto;
    margin-bottom: 20px;
    justify-content: center;
  }

  .product-details {
    flex-direction: column;
    text-align: center;
  }

  .product-image {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .payment-methods {
    flex-direction: column;
  }

  .payment-icon {
    min-width: auto;
    width: 100%;
    margin-bottom: 10px;
  }
  
  .guarantee-section {
    /* display: flex; */
    /* flex-direction: column; */
    /* border: 1px solid red;
    display: flex; */
  }
  
  .guarantee-item {
    flex-direction: row;
    gap: 10px;
  }
  
  .guarantee-icon {
    margin-bottom: 0;
  }
  
  /* 支付弹窗响应式 */
  .payment-info-section {
    flex-direction: column;
    gap: 20px;
  }
  
  .qr-code-image img {
    width: 120px;
    height: 120px;
  }
}
</style>
